﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Themeum">
</head>
<body>
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
</header>
<!-- Breadcrumb  -->

<!-- -->
<section class="breadcrumb-section-canvas">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-with-icon text-center">
                    <!--
                    <img alt="" src="images/class1/days.png">
                    -->
                    <h2 class="title-2">你就是自己的设计师</h2>
                    <p class="subtitle-2">
                        欢迎使用自己的设计画布，用自己的灵感设计出自己的范。
                    </p>
                </div>
                <div class="single-button text-right">
                    <a href="#" class="primary-btn small" id="btn-create-suit"><span>创建作品</span></a>
                    <a th:href="@{/front/service}" class="primary-btn small"><span class="twoo">找 灵 感</span></a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Facilities Section -->
<!--<section class="facility-section">
	<div class="container" id="facility-container">

	</div>
</section>-->
<!-- /.facility-section -->


<section class="classes-section-2">

    <div class="container">
        <div class="row title-with-icon text-center">
            <h1 class="title-2">特色</h1>
            <hr/>
        </div>
        <div class="row" id="feature-container">

        </div>
    </div>
</section>
<!-- /.classes-section -->

<!-- Facilities Section -->
<section class="facility-section">
    <div class="container">
        <div class="row title-with-icon text-center">
            <h1 class="title-2">时装·潮流</h1>
            <hr/>
        </div>
        <div class="row" id="tide-container">

        </div>
    </div>
</section>


<th:block th:include="commons/front::footer">FOOTER</th:block>

<template id="feature-template" type="text/x-jquery-tmpl">
    {%each(i,d) data %}
    <div class="col-sm-4 col-xs-12 mix kinder play">
        <div class="single-class">
            <div class="class-img" onclick="window.open('${d.linkUrl}');" style="cursor: pointer;">
                <img alt="" src="${d.imgUrl}" style="height: 420px;object-fit: cover">
                <div class="class-hover">
                    <a href="${d.linkUrl}" target="_blank" class="popup"><i
                            class="glyphicon glyphicon-link"></i></a>
                </div>
            </div>
            <div class="class-details">
                <h3><a href="${d.linkUrl}" target="_blank">${d.indexName}</a></h3>
            </div>
        </div>
    </div>
    {%/each%}
</template>

<template id="tide-template" type="text/x-jquery-tmpl">
    {%each(i,d) data %}
    <div class="col-sm-3 col-xs-12 text-center">
        <div class="single-facility two class-img" onclick="window.open('${d.linkUrl}');" style="cursor:pointer;">
            <img alt="" src="${d.imgUrl}" style="height: 310px;object-fit: cover">
            <div class="class-hover">
                <a href="${d.linkUrl}" target="_blank" class="popup"><i style="color: #ffffff"
                        class="glyphicon glyphicon-link"></i></a>
            </div>
        </div>
    </div>
    {%/each%}
</template>

<th:block th:include="commons/front::login">LOGIN</th:block>

<script>
    $(function () {
        // 创建作品
        $("#btn-create-suit").click(function () {
            // 获取我的作品
            if (!isLogin()) {
                Alert("您尚未没有登录");
                return;
            }
            if (businessStatus()) {
                location.href = ctx + "/front/user-info-create";
            }
        });

        getMainIndex(1, 3);
        getMainIndex(2, 4);

        function getMainIndex(type, count) {
            $.get(ctx + "/front/getMainIndex", {type: type, count: count}, function (rtn) {
                if (rtn && rtn.code != 1) {
                    Alert("获取数据失败");
                    return;
                }
                var data = rtn.data;
                if (!data) {
                    return;
                }
                if (type === 1) {
                    $("#feature-template").tmpl(rtn).appendTo('#feature-container');
                } else if (type === 2) {
                    $("#tide-template").tmpl(rtn).appendTo('#tide-container');
                }
            });
        }
    })
</script>
</body>
</html>